<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Spring Boot and Thymeleaf example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <script th:src="@{/webjars/jquery/3.1.1/jquery.js}"></script>
    <script type="text/javascript">

        $(function () {
            $("#btn-buy").click(function () {
                var genId = $("#genId").val();
                $.ajax({
                    type: "GET",
                    url: "/gambling/buy?gen_id=" + genId,
                    datatype: "text",
                    success: function (result) {
                        if (result == "success") {
                            alert("添加成功")
                        } else if (result == "error") {
                            alert("添加失败")
                        } else {
                            alert("当天已经购买")
                        }
                    }
                });
            });

            $("#btn-cash").click(function () {
                $.ajax({
                    type: "GET",
                    url: "/gambling/cashPrize",
                    datatype: "text",
                    success: function (result) {
                        if (result > 0) {
                            alert("恭喜中奖啦，总共中了" + result + "注")
                        } else if (result == "error") {
                            alert("很遗憾，没有中奖")
                        }
                    }
                });
            });

            $("#btn-forecast").click(function () {
                $.ajax({
                    type: "GET",
                    url: "/gambling/forecast",
                    datatype: "text",
                    success: function (result) {
                        $("#forecast").html(result);
                    }
                });
            });
        })
    </script>
</head>
<body>
<form th:action="@{/ssq}" method="get">
    <input type="hidden" id="genId" th:value="${genId}" value="">
    <label for="type">篮球号码：</label>
    <select name="type" id="type">
        <option th:selected="${type eq -1}" value="-1">随机</option>
        <option th:selected="${type eq 0}" value="0">偶数</option>
        <option th:selected="${type eq 1}" value="1">奇数</option>
    </select>
    <br/><br/>
    <label for="account">生成注数：</label>
    <input id="account" name="account" type="number" max="8" min="5" th:value="${account}" value="5"/>
    <br/> <br/>
    <input type="submit" value="随机号码"/>
    <input id="btn-buy" type="button" value="加入购买"/>
    <input id="btn-cash" type="button" value="点击兑奖"/>
    <input id="btn-forecast" type="button" value="预测下期"/>
    <div id="forecast"></div>
</form>
<br/>
<br/>
<label for="result">号码如下：</label>
<div id="result">
    <h4 th:each="num : ${nums}" th:text="${num}"></h4>
</div>
<div style="color: red;">
    <h5>生成时间：<span th:text="${buy_date}"></span></h5>
    <h5>注：最后一位为篮球</h5>
</div>
</body>
</html>